<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <div class="banner">
        <img src="../images/top1.jpg" alt="">
        <img src="../images/top2.jpg" alt="">
        <img src="../images/top3.jpg" alt="">
        <img src="../images/top4.jpg" alt="">
        <img src="../images/top5.jpg" alt="">
        <img src="../images/top6.jpg" alt="">
    </div>
    <div id='box1' class="gotop 
    ">
    <i class='iconfont icon-jiantou-copy-copy'></i>
</div>
    <script>
       
        // document.documentElement.scrollTop 就是滚动条距离顶部的位置（可变）
        // document.documentElement
        //1. 获取页面向上或者向左卷曲出去的距离的值
        // 2. 浏览器的滚动事件
        function getScroll() {
            return {
                left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
                top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            };
        }
        var box1=document.getElementById('box1');
        var gotop=document.getElementsByClassName('gotop')[0];
        // var top1 = document.documentElement.scrollTop || document.documentElement;
        //浏览器的滚动事件
        window.onscroll = function () {
            console.log(getScroll().top );
            if(getScroll().top>=300){
                    box1.style.display='block';   
                }else{
                    box1.style.display='none';
                }
            gotop.onclick=function(){
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
            }
        }
        /*用location传个id 然后那边用导入json文件筛选
        一般 是 location.seach获取id 那么location。hash获取锚点 怎么用实际开发中
        通过不同的COOKIE值也可以实现不同用户的购物车*/
    </script>
</body>

</html>